.brand-zone{
  width: 100vw;
  height: calc(100vh - env(safe-area-inset-bottom));
  background-color: #f5f8f7;
  overflow: hidden;
  .brand-zone-search-box-container{
    padding: 15rpx 20rpx;
    display: flex;
    align-items: center;
    font-size: 30rpx;
    .brand-zone-search-box{
      display: flex;
      width: 550rpx;
      padding: 25rpx 28rpx;
      background-color: #fff;
      border-radius: 45rpx;
    }
    .brand-zone-search-box-button{
      flex: 1;
      text-align: center;
    }
  }
  .brand-zone-scroll-view{
    height: calc(100vh - env(safe-area-inset-bottom) - 90rpx);
    .brand-zone-scroll-view-container{
      padding: 20rpx;
      padding-top: 0;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      row-gap: 20rpx;
      column-gap: 15rpx;
      .brand-zone-scroll-view-container-item{
        background-color: #fff;
        width: 232rpx;
        padding: 20rpx;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-radius: 20rpx;
        .brand-zone-scroll-view-container-item-image{
          border: 4rpx solid #5d8c7c;
          width: 145rpx;
          height: 145rpx;
        }
        .brand-zone-scroll-view-container-item-name{
          margin-top: 30rpx;
          font-size: 25rpx;
          text-align: center;
        }
      }
    }
  }
}